<template>
  <div style="padding:10px">
      <button 
      v-for="(item,index) in ['新闻','娱乐','体育']"
      :key="index"
      :class="{active:current == index}"
      @click="handleClick(index)">
      {{item}}</button>

      <div v-if="current == 0">
          <ul>
              <li>新闻列表</li>
              <li>新闻列表</li>
              <li>新闻列表</li>
          </ul>
      </div>
      <div v-if="current == 1">
          <ul>
              <li>娱乐列表</li>
              <li>娱乐列表</li>
              <li>娱乐列表</li>
          </ul>
      </div>
      <div v-if="current == 2">
          <ul>
              <li>体育列表</li>
              <li>体育列表</li>
              <li>体育列表</li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            current:0
        }
    },
    methods:{
        handleClick(index){
            this.current = index;
        }
    }
}
</script>

<style>
.active{
    color:red
}
</style>